<template>
    <view class="newCustomFree">
        <!-- <image class="topBanner"  :src="$setting.imageUrl()+'static/xinrenzhuanxiang.jpg'" mode=""></image>
		<view class="cycleBtn" style="margin-top: -28rpx;">先领券 后下单</view>
		<view class="quan">
			<view class="quan_list">
				<view class="oneOf" v-for="(item,index) in newCouponLists" :key="index" @click="postReceiveList(item)">
					<view class="money">{{item.reduce_price}}</view>
					<view class="man">满{{item.min_price}}元</view>
					<view class="nowBe">{{item.is_receive==true?'去使用':'立即可取'}}</view>
				</view>
			</view>
		</view> -->
        <view
            class="bgImgContainer"
            :style="{
                backgroundImage: 'url(' + $setting.imageUrl() + 'welfare.jpg)',
            }"
        >
            <view class="rule" @click="showRule = true"></view>
            <!-- 福利 -->
            <view class="welfareView">
                <!-- 福利1 -->
                <view class="welFareOne">
                    <view
                        >新用户专区<text class="small_text"
                            >(任选一款)</text
                        ></view
                    >
                    <view>享新人专享价</view>
                    <view @click="toProduct" class="downTo">
                        <image
                            class="downToImg"
                            :src="$setting.imageUrl() + 'downTo.png'"
                            mode=""
                        ></image>
                    </view>
                </view>
                <!-- 专区下单文案 -->
                <view class="orderText">
                    <view>新人专区内下单</view>
                    <view
                        >按订单成交金额<text class="onePointOne">1:1</text
                        >返</view
                    >
                </view>
                <!-- 福利2 -->
                <view class="backWelfare">
                    <view class="backWar">返利大作战</view>
                    <view style="margin-left: 150rpx;">
                        <view class="buyMore"> 买多少返多少 </view>
                        <view class="autoBack"> 订单完成自动返券 </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- <view class="cycleBtn" style="margin-top: 53rpx">新用户专区</view> -->
        <view class="xinYongHuShuoMing">
            新用户说明：特指首次注册未在商城下过订单的用户每个新用户仅限参与1款特价商品活动
        </view>
        <view class="newCustomShop">
            <view class="product" id="toProduct">
                <view class="product-list flex-space-between flex-wrap">
                    <view
                        class="product-item bg-fff"
                        v-for="(item, index) in productList"
                        :key="index"
                        @click="toDetail(item)"
                    >
                        <image
                            class="product-item-image"
                            :src="item.product_image"
                        ></image>
                        <view class="product-con">
                            <view class="product-con-name u-line-2">{{
                                item.product_name
                            }}</view>
                            <view class="flex-space-between productTip">
                                <view class="product-con-price">
                                    <view
                                        ><text>￥</text
                                        >{{ item.product_sku.product_price
                                        }}<image
                                            class="xinrenjia"
                                            src="../../static/xinrenjia.png"
                                        ></image
                                    ></view>
                                    <text
                                        >￥{{
                                            item.product_sku.line_price
                                        }}</text
                                    >
                                </view>
                                <b-u-button-theme
                                    width="52rpx"
                                    height="40rpx"
                                    size="24rpx"
                                    @click="toDetail(item)"
                                    >购买</b-u-button-theme
                                >
                            </view>
                        </view>
                    </view>

                    <view
                        class="product-item"
                        v-if="productList.length % 2 == 1"
                    ></view>
                </view>
            </view>
        </view>
        <buyOneBackTicketRule @onClose="showRule = false" :show-rule="showRule"></buyOneBackTicketRule>
    </view>
</template>

<script>
export default {
    data() {
        return {
            productPageForm: {
                recommend: 0,
                category_id: 0,
                list_rows: 40,
            },
            productList: [],
            newCouponLists: [],
            userInfo: {},
            showRule: false,
        };
    },
    async onShow() {
		await this.$onLaunched
        this.getHttp();
    },
    methods: {
        toDetail(item) {
            // console.log('item',item)
            if (item.categorydetail.type == 1) {
                this.jump(
                    "/pages/categoty/product/product_no_cart?id=" +
                        item.product_id
                );
            } else {
                this.jump(
                    "/pages/categoty/product/product?id=" + item.product_id
                );
            }
        },
        getHttp() {
            uni.$u.api.userInfo().then((res) => {
                this.userInfo = res;
                if (this.userInfo && this.userInfo.newPeople == 0) {
                    uni.switchTab({
                        url: "/pages/index/index",
                    });
                }
                this.getNewcomerCouponList();
                this.getProduct();
            });
        },
        postReceiveList(item) {
            if (item["is_receive"] == true) {
                let gourl = "/pages/categoty/categoty?topindex=1&smindex=0";
                console.log("333", gourl);
                uni.reLaunch({
                    url: gourl,
                });
                return;
            }
            console.log(this);
            if (uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
                this.jump("/pages/login/login");
                return;
            }
            let coupon_ids = [];
            this.newCouponLists.forEach((item, key) => {
                coupon_ids.push(item.coupon_id);
            });
            uni.$u.api
                .postReceiveList({
                    coupon_ids,
                })
                .then((res) => {
                    this.$emit("hideCouponModal", false);
                    uni.showToast({
                        title: "领取成功",
                    });
                    this.newCouponLists.map((item) => {
                        return (item.is_receive = true);
                    });
                });
        },
        ling(coupon_id) {
            console.log("coupon_id", coupon_id);
            // let coupon_id = coupon_id;
            uni.$u.api
                .postReceiveOne({
                    coupon_id,
                })
                .then((res) => {
                    // this.$emit('hideCouponModal', false)
                    uni.showToast({
                        title: "领取成功",
                    });
                });
        },
        getNewcomerCouponList() {
            uni.$u.api
                .getNewcomerCouponList({
                    limit: 100,
                })
                .then((res) => {
                    this.newCouponLists = res;
                });
        },
        getProduct() {
            uni.$u.api
                .getNewcomerProductLists(this.productPageForm)
                .then((res) => {
                    this.productList = res.list.data;
                });
        },
        jump(url) {
            uni.navigateTo({
                url: url,
            });
        },
        toProduct() {
            uni.createSelectorQuery()
                .select(".newCustomShop")
                .boundingClientRect((res) => {
                    uni.pageScrollTo({
                        duration: 0,
                        scrollTop: anchor.top + this.scrollTop,
                    });
                });
            //目标位置的节点
            uni.createSelectorQuery()
                .select(".newCustomShop")
                .boundingClientRect((data) => {
                    //最外层盒子的节点
                    uni.createSelectorQuery()
                        .select(".newCustomFree")
                        .boundingClientRect((res) => {
                            uni.pageScrollTo({
                                duration: 0, //过渡时间
                                scrollTop: data.top - res.top - 40, //到达距离顶的top值
                            });
                        })
                        .exec();
                })
                .exec();
        },
    },
    async onLoad(options) {},
};
</script>

<style lang="scss" scoped>
.newCustomFree {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(180deg, #f63233 0%, #f63233 100%);

    .topBanner {
        width: 100%;
        height: 400rpx;
    }

    .cycleBtn {
        width: 156px;
        height: 36px;
        border-radius: 80px;
        opacity: 1;
        background: linear-gradient(180deg, #f6dacb 0%, #fffcf5 100%);
        box-shadow: inset 0px 2px 6px 0px #ff9f63;
        font-size: 18px;
        font-weight: 500;
        line-height: 20px;
        color: #fe0d1d;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .quan {
        margin-top: 30rpx;
        width: 345px;
        height: 292px;
        border-radius: 12px;
        background: #fef2e2;

        .quan_list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 24rpx 12rpx;
            gap: 14rpx;

            .oneOf {
                width: 78px;
                height: 78px;
                border-radius: 4px;
                background: #ffffff;
                padding-top: 10rpx;
                margin-bottom: 17rpx;

                .money {
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 20px;
                    text-align: center;
                    color: #fe0d1d;
                    display: flex;
                    justify-content: center;
                }

                .man {
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 22px;
                    text-align: center;
                    color: #fe0d1d;
                    display: flex;
                    justify-content: center;
                }

                .nowBe {
                    width: 78px;
                    height: 32px;
                    border-radius: 6px;
                    background: #feb403;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                    text-align: center;
                    letter-spacing: 0px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    color: #ffffff;
                }
            }
        }
    }

    .xinYongHuShuoMing {
        width: 324px;
        height: 52px;
        border-radius: 8px;
        background: #c10f15;
        margin-top: 26rpx;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        color: #ffffff;
        padding: 12rpx 48rpx;
    }

    .newCustomShop {
        .product {
            margin-top: 20rpx;
            width: 692rpx;
            .xinrenjia {
                width: 33px;
                height: 12px;
            }
            .product-list {
                padding-bottom: 30rpx;
                margin-top: 28rpx;

                .productTip {
                    background: #fe0d1d;
                    border-radius: 80px;
                    padding: 0rpx 10rpx;
                }

                .product-item {
                    width: 334rpx;
                    border-radius: 16rpx;
                    margin-bottom: 24rpx;
                    overflow: hidden;
                }

                .product-item-image {
                    width: 334rpx;
                    height: 328rpx;
                }

                .product-con {
                    padding: 12rpx 20rpx 18rpx;

                    .product-con-name {
                        font-size: 26rpx;
                        color: #333;
                        font-weight: bold;
                        margin-bottom: 14rpx;
                        min-height: 68rpx;
                    }

                    .product-con-price {
                        view {
                            font-size: 28rpx;
                            font-weight: bold;
                            color: #fff;

                            text {
                                color: #fff;
                                font-size: 24rpx;
                                text-decoration: none;
                            }
                        }

                        text {
                            font-size: 22rpx;
                            text-decoration: line-through;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
.bgImgContainer {
    height: 70vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 70vh;
    background-color: #f6f6f6;
    position: relative;
}
.welfareView {
    box-sizing: border-box;
    height: 35vh;
    width: 100%;
    padding: 1vh 8vw 0vh 10vw;
    position: absolute;
    top: 35vh;
}
.welFareOne {
    font-size: 32rpx;
    font-weight: bold;
    color: white;
    position: relative;
    margin-left: 4.5vw;
    .small_text {
        font-size: 24rpx;
        margin-top: 12rpx;
        font-weight: normal;
    }
}
.downTo {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    background-repeat: no-repeat;
    background-size: 20% 10vh;
}
.downToImg {
    width: 40rpx;
    height: 40rpx;
}
.orderText {
    // margin-top: 3vh;
    // margin-left: 22vw;
    position: absolute;
    top: 9vh;
    right: 38vw;
    font-size: 24rpx;
    .onePointOne {
        font-size: 30rpx;
    }
}
.backWelfare {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 15vw;
    top: 15vh;
}
.backWar {
    color: #f32827;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 3vh;
    margin-right: 20rpx;
}
.buyMore {
    color: #f32827;
    font-size: 32rpx;
    margin-top: 30rpx;
    letter-spacing: 7rpx;
}
.autoBack {
    // font-size: 20rpx;
    color: #8e5816;
}
.rule {
    position: absolute;
    top: 1vh;
    right: 0vw;
    height: 3vh;
    width: 15vw;
}
</style>
